<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      border: 1px solid black;
    }
    #mainDiv{
      width: 800px;
      height: 600px;
      /*background-color: #2b92d9;*/
      margin: auto;
      display: flex;
    }
    #bookInfo{
      position: relative;
      top:150px;
      width:300px;
      height:300px;
      /*background-color: red;*/
    }
    #bookImg{
      position: relative;
      top:200px;
      width: 100px;
      height: 90px;
      /*background-color: #00bfe5;*/
    }
    #Table{
      position: relative;
      top:150px;
      width: 400px;
      height: 300px;
      /*background-color: #b3d4fc;*/
    }
    #bookImg img{
      visibility: hidden;
    }
    #shopDiv{
      position: absolute;
      left: 0px;
      top:0px;
      width: 500px;
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(250,0,0,0.4);
      visibility: hidden;
    }
    #shopTable{
      width: 500px;
      height: 300px;
      background-color: white;
    }
  </style>
  <script src="book.js"></script>
  <script src="shop.js"></script>
  <script>
     function $(id) {
      return document.getElementById(id)
     }
     var obj
     window.onload = function () {
       fullTablet(booksArray)
       fullShopTablet(shopArray)
       var trArray = $('color').getElementsByTagName('tr')
       for(let i=0;i<trArray.length;i++){
          trArray[i].onclick = function () {
              changeColors(this)
             obj =   booksArray[i]
            $('bookName').value = obj.name
            $('authorName').value = obj.author
            $('bookPrice').value = obj.price
             changeImg("软件开发沉思",'one')
            changeImg("水浒传",'two')
            changeImg("西游记",'three')
            changeImg("Java核心技术",'four')
            changeImg("十万个为什么",'five')
          }
       }
     }

     /***
      * 填充表格
      */
   function  fullTablet(booksArray) {
          let str =""
       booksArray.forEach(n =>{
         str +=`<tr><td>${n.code}</td><td>${n.name}</td><td>${n.author}</td>
           <td>${n.price}</td></tr>`
       })
        $('color').innerHTML = str
     }
     /***
      * 填充购物车表格
      */
     function fullShopTablet(shopArray) {
       let str =""
      shopArray.forEach(n =>{
         str +=`<tr><td>${n.code}</td><td>${n.name}</td><td>${n.price}</td>
           <td><input type="number" value="1" min="1"></td><td>${n.totalPrice}</td>
           <td><input type="button" value="移除商品" ></td></tr>`
       })
       $('shopBody').innerHTML = str
     }
     /***
      *修改购买数量
      */
     function changeNumber(texObj) {
       if(texObj.value.length==0 || texObj.value<1){
         texObj.value = 1;
       }
       let price =  texObj.parentNode.previousElementSibling.innerHTML
       let tdObj = texObj.parentNode.nextElementSibling
       tdObj.innerHTML = price * texObj.value
       totalprice()
     }
     /***
      * 移除商品
      */
     function delShop(buttonObj) {
       buttonObj.parentNode.previousElementSibling.parentNode.remove()
       totalprice()
     }
     /**
      * 点击切换图片
      */
    function changeImg(name ,imgDress){
        if(obj.name ==name){
            $(imgDress).style.visibility='visible'
        }
        else if(obj.name != name){
          $(imgDress).style.visibility='hidden'
        }
    }
     /***
      * 点击改变颜色
      * @param obj
      */
     let coloTrs = null
     function changeColors(selectobj) {
         if(coloTrs != null){
           coloTrs.style.backgroundColor="white"
         }
          selectobj.style.backgroundColor ="red"
          coloTrs = selectobj
     }
     /**
      * 按书名查询相关对象
      */
     function findByNames() {
        var arr =  booksArray.filter(n =>n.name.indexOf($('name').value) !=-1)
       fullTablet(arr)
     }
     /***
      * 添加商品
       */
     let add
     var shop
     function addshop() {
       let booObj = booksArray.find(n => n.name == $('bookName').value)
        add = shopArray.find(n => n.name == $('bookName').value)
        shop = {
         "code":booObj.code,"name": $('bookName').value, "price": $('bookPrice').value,
         "number": 1, "totalPrice": $('bookPrice').value
       }
       shopArray.push(shop)
       fullShopTablet(shopArray)
       totalPrice()
     }
     /***
      *显示购物界面
      */
     function addShopCar() {
       $('shopDiv').style.visibility = "visible"
       $('shopDiv').style.width = document.documentElement.clientWidth + "px"
       $('shopDiv').style.height = document.documentElement.clientHeight + "px"
       addshop()
       var inputArray =  $('shopBody').getElementsByTagName("input")
       for(let i=0;inputArray.length;i++){
         if(inputArray[i].type =="number"){
           inputArray[i].onblur = function () {
             changeNumber(this)
           }
         }
         else if(inputArray[i].type =="button") {
           inputArray[i].onclick = function () {
             delShop(this)
           }
         }
       }
       totalprice()
     }

     /***
      * 关闭购物城界面
      */
     function closeShop() {
       $('shopDiv').style.visibility="hidden"
     }

     /***
      * 计算总价
      */
     function  totalPrice() {
       let sum = 0
       let trArray = $('shopBody').getElementsByTagName("tr")
       for(let i=0;i<trArray.length;i++){
         let tdArray = trArray[i].getElementsByTagName('td')
         sum += parseInt(tdArray[4].innerHTML)
       }
       $('total').innerHTML = sum
     }
  </script>
</head>
<body>
     <div id="mainDiv">
        <div id="bookInfo">
          图书名：<input type="text" id="bookName"><br>
          作者：<input type="text" id="authorName"><br>
          出版时间：<input type="text" id="bookDate"><br>
          售价：<input type="text" id="bookPrice"><br>
          <input  type="button" value="加入购物车" onclick="addShopCar()">
        </div>
        <div id="bookImg">
          <img id="one" src="photo/b1.jpg"/>
          <img id="two" src="photo/b2.jpg"/>
          <img id="three"src="photo/b3.jpg"/>
          <img id="four"src="photo/b4.jpg"/>
          <img id="five"src="photo/b5.jpg"/>
        </div>
        <div id="Table">
            <table border="1px" width="400px" cellspacing="0">
              <thead>
              <tr><th>编号</th><th>图书名</th><th>作者</th><th>销售价</th></tr>
              </thead>
              <tbody id="color"></tbody>
            </table>
           图书名：<input type="text" id="name">
          <input type="button" value="查询" onclick="findByNames()">
        </div>
     </div>
     <div id="shopDiv">
           <div id="shopTable">
              <table border="1px" width="500px" cellspacing="0">
                <thead>
                <tr><th>编号</th><th>商品名</th><th>单价</th><th>数量</th><th>总价</th><th>移除商品</th></tr>
                </thead>
                <tbody id="shopBody"></tbody>
              </table>
             购物车总价：￥<span id="total"></span><br>
              <input type="button" value="继续购物" onclick="closeShop()">
           </div>
     </div>
</body>
</html>
